<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.prime.com.tr/ui">
    <h:head>
        <title>
	        <ui:insert name="title">ACUMAAF - SIAF 2.0</ui:insert>
        </title>
    </h:head>
	<h:body>
    	<p:layout fullPage="true" onResizeComplete="true">
		    <!-- LAYOUT DO TOPO DA PÁGINA -->
			<p:layoutUnit position="top" resizable="false" height="150" style=" background-image: url('../images/bg.png')">
				<ui:include src="/componentes/layout_menu_doc_top.xhtml"/>
				<p:graphicImage url="/images/layout-top-atividade-fisica2.png" style="height:90px;"/>
			</p:layoutUnit>
       		<!-- LAYOUT DO LADO ESQUERDO DA PÁGINA -->
       		<p:layoutUnit position="left" header="Calendário" resizable="false" width="250">
        		<ui:include src="/componentes/layout_esquerdo.xhtml" />
       		</p:layoutUnit>
       		<!-- LAYOUT DO LADO ESQUERDO DA PÁGINA -->
       		<p:layoutUnit position="right" header="Imagem" resizable="false" width="250">
       			<ui:include src="/componentes/layout_direito.xhtml" />
        	</p:layoutUnit>
        	<!-- LAYOUT DO CENTRO DA PÁGINA -->
       		<p:layoutUnit position="center" id="centro" resizable="true"  scrollable="true" width="250">
       			<!-- TABELA COM OS REGISTROS DE DADOS DAS SESSÕES DE ATIVIDADES FÍSICAS -->
       			<h:form id="formTableListaDadosSessao">
					<p:dataTable id="dataTableListaDadosSessao" var="dado" 
					             value="#{dadosessaoMB.listaDadoSessao}" paginator="true" rows="10">
					        <f:facet name="header">
				           		Lista de registros dos dados coletados nas sessões de Atividade Física
				       		</f:facet>
							<p:column style="width:10px; text-align:center;">
				       		    <f:facet name="header">
				               	<h:outputText value="Código" />
				           		</f:facet>
				           		<h:outputText value="#{dado.codigodadosessao}" />
				       		</p:column>
				       		<p:column style="text-align:center;">
				       		    <f:facet name="header">
				               		<h:outputText value="Data da Sessão" />
				           		</f:facet>
				           		<h:outputText value="#{dado.sessao.data}">
				           			<f:convertDateTime pattern="dd/MM/yyyy"/>
				           		</h:outputText>
				       		</p:column>
				       		<p:column>
				       		    <f:facet name="header">
				               		<h:outputText value="Participante" />
				           		</f:facet>
				           		<h:outputText value="#{dado.usuario.nome}" />
				           	</p:column>
				            <p:column sortBy="#{dado.instrumentocoleta.nome}" filterBy="#{dado.instrumentocoleta.nome}">
				       		    <f:facet name="header">
				               		<h:outputText value="instrumento de coleta" />
				           		</f:facet>
				           		<h:outputText value="#{dado.instrumentocoleta.nome}" />
				           	</p:column>
				           	<p:column>
				       		    <f:facet name="header">
				               		<h:outputText value="Valor" />
				           		</f:facet>
				           		<h:outputText value="#{dado.valor}" />
				           	</p:column>
					        <p:column headerText="Ações" style="width:90px;text-align:center;" >
					        	<p:commandButton title="Visualizar" update=":formListaDadosSessao:displayView" image="ui-icon ui-icon-search" 
					        	                 oncomplete="dialogSessaoAtividadeFisica.show()" >
				       				<f:setPropertyActionListener target="#{dadosessaoMB.dadoSessaoSelecionado}" value="#{dado}" />
				       				<f:setPropertyActionListener target="#{dadosessaoMB.ativo}" value="#{false}"/>
					       		</p:commandButton>
					       		<p:commandButton title="Editar" update=":formListaDadosSessao:panelGridDialogEditarSessao" 
					       						 image="ui-icon ui-icon-pencil" oncomplete="dialogSessaoEdit.show()">
				       				<f:setPropertyActionListener target="#{dadosessaoMB.dadoSessaoSelecionado}" value="#{dado}" />
				       				<f:setPropertyActionListener value="#{true}" target="#{dadosessaoMB.ativo}" />
					       		</p:commandButton>
					       		<p:commandButton title="Deletar" update=":formListaDadosSessao:panelGridDialogEditarSessao" 
					       						 image="ui-icon ui-icon-close" oncomplete="confirmacaoDialog.show()">
					       				<f:setPropertyActionListener target="#{dadosessaoMB.dadoSessaoSelecionado}" value="#{dado}" />
					       				<f:setPropertyActionListener target="#{dadosessaoMB.ativo}" value="#{false}"/>
					       		</p:commandButton>
					        </p:column>	
				    </p:dataTable>	
       			</h:form>
 		   	</p:layoutUnit>
 		   	<!-- LAYOUT DO RODAPÉ DA PÁGINA -->
       		<p:layoutUnit position="bottom" resizable="false" height="60" style="background-image: url('../images/bg.png')">
        		<ui:include src="/componentes/layout_rodape.xhtml" />
       		</p:layoutUnit>
    	</p:layout>
    	<h:form id="formListaDadosSessao">
		  	<!-- DIALOG PARA VISUALIZAÇÃO DE DETALHES DE UM DETERMINADO REGISTRO DE DADOS DE SESSAO DE ATIVIDADE FÍSICA SELECIONADO PELO USUÁRIO -->
		  	<p:dialog header="Detalhes do registro da Sessão de Atividade Física" widgetVar="dialogSessaoAtividadeFisica" resizable="false"
					   width="470" showEffect="explode" hideEffect="explode" modal="true">
				<h:panelGrid id="displayView">
					<p:panel style="width:150px; height: 150px;border:none;margin-left: auto; margin-right: auto;">
						 	<p:graphicImage url="/images/dado-sessao-icon.png"/>
						</p:panel>
					<p:panel header="Sessão de Atividade Física e Participante">
						<h:panelGrid columns="2" style="margin-left: auto; margin-right: auto;">
							<p:panel header="Sessão de Atividade Física">
								<h:panelGrid columns="2" columnClasses="label, value" styleClass="grid">
									<h:outputText value="Sessão:"/>
									<h:outputText value="#{dadosessaoMB.dadoSessaoSelecionado.sessao.data}" style="color:blue;">
										<f:convertDateTime pattern="dd/MM/yyyy"/>
									</h:outputText>		
								</h:panelGrid>
							</p:panel>
							<p:panel header="Participante da Atividade Física">
									<h:panelGrid columns="2" columnClasses="label, value" styleClass="grid">
										<h:outputText value="Participante:"/>
											 <h:outputText value="#{dadosessaoMB.dadoSessaoSelecionado.usuario.nome}" style="color:blue;"/>  	
									</h:panelGrid>
							</p:panel>
						</h:panelGrid>
					</p:panel>
					<p:panel header="Instrumento de Coleta">
							<h:panelGrid columns="2" columnClasses="label, value" styleClass="grid">
								<h:outputText value="Instrumento de Coleta:"/>
								<h:outputText value="#{dadosessaoMB.dadoSessaoSelecionado.instrumentocoleta.nome}" style="color:blue;"/>	   	
							</h:panelGrid>
					</p:panel>
					<p:panel header="Dado da Sessão">
						<h:panelGrid columns="2" columnClasses="label, value" styleClass="grid">
								<h:outputText value="Valor do dado.............: " />
									<h:outputText value="#{dadosessaoMB.dadoSessaoSelecionado.valor}" style="color:blue;"/>
						</h:panelGrid>
					</p:panel>
					<p:panel header="Observações">
						<h:panelGrid columns="2" columnClasses="label, value">
							<h:outputText value="Observação................: " />
								<h:outputText value="#{dadosessaoMB.dadoSessaoSelecionado.descricao}" style="color:blue;"/>	
						</h:panelGrid>
					</p:panel>
				</h:panelGrid>	   
			</p:dialog>
			<!-- DIALOG PARA FORMULÁRIO DE EDIÇÃO DE UM DETERMINADO REGISTRO DE EQUIPE DE SAÚDE DA FAMÍLIA SELECIONADO PELO USUÁRIO -->
			<p:dialog header="Edição de registro da Unidade de Saúde" widgetVar="dialogSessaoEdit" resizable="false"
			          width="700" showEffect="explode" hideEffect="explode" id="idDialogUnidadeSaudeEdit" closable="false" 
			          modal="true" >
			    <h:panelGrid id="panelGridDialogEditarSessao">
			    	<p:growl autoUpdate="true" id="growl" sticky="true"/>
					<p:messages id="msgeditar" autoUpdate="true"/>
					<p:panel header="Selecione uma Sessão de Atividade Física e um Participante">
						<h:panelGrid columns="2" style="margin-left: auto; margin-right: auto;">
							<p:panel header="Selecione uma Sessão de Atividade Física">
								<h:panelGrid columns="3" columnClasses="label, value" styleClass="grid">
									<h:outputText value="Sessão:"/>
									<p:calendar id="sessaoAtividadeFisica" name="sessaoAtividadeFisica" value="#{dadosessaoMB.dadoSessaoSelecionado.sessao.data}" 
									             required="true" requiredMessage="[Data da Sessão] É necessário escolher uma Sessão de Atividade Física!" 
									             style="width:200px;" onkeypress="return false;" pattern="dd/MM/yyyy" disabled="true"/>
									<h:outputLink value="javascript:void(0)" onclick="dialogSessao.show()" title="Seleção de Sessão de Atividade Física">     
									    <p:graphicImage value="/images/sessao-atividade-fisica-mini-icon.png" />  
									</h:outputLink>		
								</h:panelGrid>
							</p:panel>
							<p:panel header="Selecione um Participante da Atividade Física">
									<h:panelGrid columns="3" columnClasses="label, value" styleClass="grid">
										<h:outputText value="Participante:"/>
											 <p:inputText id="participanteAtividadeFisica" name="participanteAtividadeFisica" value="#{dadosessaoMB.dadoSessaoSelecionado.usuario.nome}" 
										            required="true" requiredMessage="[Participante] É necessário escolher um Participante da Atividade Física!" 
										            style="width:200px;" onkeypress="return false;" disabled="true"/>
										<h:outputLink value="javascript:void(0)" onclick="dialogParticipante.show()" title="Seleção de Participante da Atividade Física">     
										    <p:graphicImage value="/images/participante-icon.png" />  
									 	</h:outputLink>  	
									</h:panelGrid>
							</p:panel>
						</h:panelGrid>
					</p:panel>
					<p:panel header="Selecione um Instrumento de Coleta">
							<h:panelGrid columns="3" columnClasses="label, value" styleClass="grid">
								<h:outputText value="Instrumento de Coleta:"/>
								<p:inputText id="instrumentoColeta" name="instrumentoColeta" value="#{dadosessaoMB.dadoSessaoSelecionado.instrumentocoleta.nome}" 
								            required="true" requiredMessage="[Instrumento de Coleta] É necessário escolher um Instrumento de Coleta!" 
								            style="width:200px;" onkeypress="return false;" disabled="true"/>
								<h:outputLink value="javascript:void(0)" onclick="dialogInstrumentoColeta.show()" title="Seleção de Instrumento de Coleta">     
								    <p:graphicImage value="/images/instrumentocoleta-mini-icon.png" />  
							 	</h:outputLink>	   	
							</h:panelGrid>
					</p:panel>
					<p:panel header="Dado da Sessão">
						<h:panelGrid columns="2" columnClasses="label, value" styleClass="grid">
								<h:outputText value="Valor do dado...........: *" />
									<p:inputText maxlength="20" value="#{dadosessaoMB.dadoSessaoSelecionado.valor}" required="true" 
									requiredMessage="[Valor do dado] É necessário preencher o campo de Valor do dado"/>
						</h:panelGrid>
					</p:panel>
					<p:panel header="Observações">
						<h:panelGrid columns="2" columnClasses="label, value">
							<h:outputText value="Observação...............: " />
								<p:inputTextarea maxlength="300" value="#{dadosessaoMB.dadoSessaoSelecionado.descricao}" style="width:300px; height: 50px;" effectDuration="400"/>	
						</h:panelGrid>
					</p:panel>
				</h:panelGrid>
				<h:panelGrid columns="2" columnClasses="label, value" styleClass="grid" style="border:none;">
					<h:outputText value="* Campos Obrigatórios!"/> <br/><br/>
					<p:commandButton id="commandButtonEditar" action="#{dadosessaoMB.editar}" value="Editar"
						                 update=":formTableListaDadosSessao:dataTableListaDadosSessao,msgeditar,growl" 
						                 image="ui-icon ui-icon-pencil" oncomplete="handleEditRequest(xhr, status, args)"/>
				</h:panelGrid>
			</p:dialog>		
			<!-- DIALOG CONFIRMAÇÃO DA DELEÇÃO -->
			<p:confirmDialog message="Deseja realmente deletar o registro selecionado?" width="200"
	                 				  showEffect="explode" hideEffect="explode"
	                 				  header="Confirmação de Deleção" severity="alert" widgetVar="confirmacaoDialog" modal="true">
			    	<p:commandButton value="Deletar" image="ui-icon ui-icon-check" 
			    	                 update=":formTableListaDadosSessao:dataTableListaDadosSessao" 
			    					 actionListener="#{dadosessaoMB.deletar}" 
	   		                         oncomplete="confirmacaoDialog.hide()"/>
		        	<p:commandButton value="Cancelar" image="ui-icon ui-icon-close" onclick="confirmacaoDialog.hide()" type="button" />   	
	    	</p:confirmDialog>
	    	<!-- DIALOG PARA SELEÇÃO DE SESSÃO -->
    		<p:dialog header="Seleção de Sessão de Atividade Física" widgetVar="dialogSessao" resizable="false" width="500"  
    	          showEffect="explode" hideEffect="explode" id="idDialogSessao" closable="true" modal="true">
				<p:dataTable id="dataTableSessao" var="sessao" 
					             value="#{dadosessaoMB.listaSessao}" paginator="true" rows="10">s
				       		<f:facet name="header">
				           		Lista de Sessões de Atividade Física
				       		</f:facet>
							<p:column style="width:10px; text-align:center;">
				       		    <f:facet name="header">
				               	<h:outputText value="Código" />
				           		</f:facet>
				           		<h:outputText value="#{sessao.codigosessao}" />
				       		</p:column>
				               <p:column style="text-align:center;">
				       		    <f:facet name="header">
				               		<h:outputText value="Sessão de Atividade" />
				           		</f:facet>
				           		<h:outputText value="#{sessao.data}">
				           			<f:convertDateTime pattern="dd/MM/yyyy"/>
				           		</h:outputText>
				       		</p:column>
					        <p:column headerText="Selecionar" style="width:20px; text-align:center;" >
					        	<p:commandButton title="Selecionar" value="Selecionar" update=":formListaDadosSessao:sessaoAtividadeFisica" 
					        	                 image="ui-icon ui-icon-search" oncomplete="dialogSessao.hide()">
				       				<f:setPropertyActionListener target="#{dadosessaoMB.dadoSessaoSelecionado.sessao}" value="#{sessao}" />
					       		</p:commandButton>
					        </p:column>	
				    </p:dataTable>
			</p:dialog>
			<!-- DIALOG PARA SELEÇÃO DE PARTICIPANTE -->
    		<p:dialog header="Seleção do Participante" widgetVar="dialogParticipante" resizable="false" width="500"  
    	          showEffect="explode" hideEffect="explode" id="idDialogParticipante" closable="true" modal="true">
				<p:dataTable id="dataTableParticipante" var="participante" 
					             value="#{dadosessaoMB.listaUsuarios}" paginator="true" rows="10">s
				       		<f:facet name="header">
				           		Lista de Participantes cadastrados
				       		</f:facet>
							<p:column style="width:10px; text-align:center;">
				       		    <f:facet name="header">
				               	<h:outputText value="Código" />
				           		</f:facet>
				           		<h:outputText value="#{participante.codigousuario}" />
				       		</p:column>
				               <p:column sortBy="#{participante.nome}" filterBy="#{participante.nome}" style="width:100px;">
				       		    <f:facet name="header">
				               		<h:outputText value="Nome" />
				           		</f:facet>
				           		<h:outputText value="#{participante.nome}" />
				       		</p:column>
					        <p:column headerText="Selecionar" style="width:20px; text-align:center;" >
					        	<p:commandButton title="Selecionar" value="Selecionar" update=":formListaDadosSessao:participanteAtividadeFisica" 
					        	                 image="ui-icon ui-icon-search" oncomplete="dialogParticipante.hide()">
				       				<f:setPropertyActionListener target="#{dadosessaoMB.dadoSessaoSelecionado.usuario}" value="#{participante}" />
					       		</p:commandButton>
					        </p:column>	
				    </p:dataTable>
			</p:dialog>
			<!-- DIALOG PARA SELEÇÃO DE INSTRUMENTO DE COLETA -->
    		<p:dialog header="Seleção de Instrumento de Coleta" widgetVar="dialogInstrumentoColeta" resizable="false" width="500"  
    	          showEffect="explode" hideEffect="explode" id="idDialogInstrumentoColeta" closable="true" modal="true">
				<p:dataTable id="dataTableIntrumentoColeta" var="instrumentoColeta" 
					             value="#{dadosessaoMB.listaInstrumentoColeta}" paginator="true" rows="10">s
				       		<f:facet name="header">
				           		Lista de Participantes cadastrados
				       		</f:facet>
							<p:column style="width:10px; text-align:center;">
				       		    <f:facet name="header">
				               	<h:outputText value="Código" />
				           		</f:facet>
				           		<h:outputText value="#{instrumentoColeta.codigoinstrumentocoleta}" />
				       		</p:column>
				               <p:column sortBy="#{instrumentoColeta.nome}" filterBy="#{instrumentoColeta.nome}" style="width:100px;">
				       		    <f:facet name="header">
				               		<h:outputText value="Nome" />
				           		</f:facet>
				           		<h:outputText value="#{instrumentoColeta.nome}" />
				       		</p:column>
					        <p:column headerText="Selecionar" style="width:20px; text-align:center;" >
					        	<p:commandButton title="Selecionar" value="Selecionar" update=":formListaDadosSessao:instrumentoColeta" 
					        	                 image="ui-icon ui-icon-search" oncomplete="dialogInstrumentoColeta.hide()">
				       				<f:setPropertyActionListener target="#{dadosessaoMB.dadoSessaoSelecionado.instrumentocoleta}" value="#{instrumentoColeta}" />
					       		</p:commandButton>
					        </p:column>	
				    </p:dataTable>
			</p:dialog>
	   	</h:form>
	   	<!-- SCRIPT PARA VERIFICAR SE O USUÁRIO PREENCHEU TODOS OS CAMPOS OBRIGATÓRIOS DA PÁGINA -->
	   	<script type="text/javascript">  
		    function handleEditRequest(xhr, status, args) {  
		        if(args.validationFailed) {   
		        } else {  
		        	dialogSessaoEdit.hide();    
		        }  
	           }  
	       </script>
	</h:body>
</html>